<div>
    <cly-form-field :label="i18n('dashboards.source-apps')" name="app" rules="required">
        <cly-app-select
            :disabled="sdkListLoading"
            :placeholder="i18n('placeholder.dashboards.select-applications-single')"
            style="width: 100%"
            @change="loadSDKList(scope.editedObject.selectedApp)"
            v-model="scope.editedObject.selectedApp">
        </cly-app-select>
    </cly-form-field>
    <cly-form-field label="SDK type" name="sdkList" rules="required">
        <cly-select-x
            class="cly-is-fullwidth"
            :auto-commit="true"
            :disabled="sdkListLoading || !scope.editedObject.apps"
            :hide-all-options-tab="true"
            :key="'select_sdk'"
            :options="availableSDKs"
            :width="500"
            v-model="selectedSingleSDK">
        </cly-select-x>
    </cly-form-field>
    <clyd-visualization v-model="scope.editedObject.visualization" :enabled-types="enabledVisualizationTypes"></clyd-visualization>
    <clyd-metric v-model="scope.editedObject.metrics" :metrics="metrics" :multiple="isMultipleMetric"></clyd-metric>
    <clyd-displaytype v-model="scope.editedObject.displaytype" v-if="showDisplayType"></clyd-displaytype>
    <clyd-title v-model="scope.editedObject.title"></clyd-title>
	<clyd-period v-if="showPeriod" v-model="scope.editedObject.custom_period"></clyd-period>
</div>